<template>
  <div class="app-main">
    <div class="section-main clearfix">
      <div class="stop">
        <div class="img-moon">
          <div class="title">
            <img src="../../../assets/img/zhongqiu/title.png" alt="">
          </div>
          <p class="content" v-text="content"></p>
        </div>
      </div>
      <div class="sbottom" v-if="imgUrl">
          <div  class="cutimg">
            <div  class="img-div">
              <img :src="imgUrl" alt="">
            </div>
          </div>
      </div>
    </div>
    <div class="section-bottom">
      <img src="../../../assets/img/zhongqiu/bottom1.png" alt="" class="img-fenche">
        <div class="show-div" @click="suremake">
          <btn-router
            backgroundColor='#cd6e00'
            :width=256
            :height=50
            size='14'
          >生成贺卡</btn-router>
        </div>
        <div class="back-div" @click="goback" >
          <btn-router
            backgroundColor='#cd6e00'
            :width=256
            :height=50
            size='14'
          >返回上级</btn-router>
        </div>
    </div>
  </div>
</template>

<script>
import btnRouter from '@/components/routerButton'// 跳转按钮组件
import { mapState } from 'vuex'

console.log(mapState)
export default {
  name: 'Show',
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      imgUrl: state => state.file.imgUrl,
      content: state => state.file.content
    })
  },
  components: {
    btnRouter
  },
  methods: {

    goback () {
      this.$router.go(-1)
    },
    suremake () {
      if (this.imgUrl) {
        var imgfile = this.convertBase64UrlToBlob(this.imgUrl)
        console.log(imgfile)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .app-main{background:url(../../../assets/img/zhongqiu/background.png) no-repeat top left;background-size:cover}
  .section-main{position:relative;top:0.5rem;margin: 0 auto;width:100%;padding:5%;z-index: 4}
  .content{ position: relative;top: 1.5rem;right:1.5rem;height: 4rem; float: right;overflow: hidden;font-size:12px;word-break:break-all;line-height: 2em;writing-mode:vertical-rl;writing-mode:tb-rl;}

  .title{height: 4rem; position: relative; float: right; top: 1.5rem; width:0.9rem;right: 1.5rem;overflow: hidden;border-left: 1px solid #666}
  .title img{height: 100%}
  .sleft{position: relative;float: left;width: 4rem;top:-0.3rem;}
  .sright{float: right;width:4rem;position: absolute;right: 4%;top:0.1rem}
  .sright img{width: 100%}
  .img-moon{position:relative;left:6%;background:url(../../../assets/img/zhongqiu/moon2.png) no-repeat center center;background-size:contain;width:90%;min-height: 6rem;overflow: hidden;}
  .cutimg{left:9%;position:relative;height:5rem;background:url(../../../assets/img/zhongqiu/photo.png) no-repeat center center;background-size:contain;width: 80%}
  .img-div{margin:0 auto;width:2.3rem;height:2.25rem;position: absolute;bottom: 8%;left: 31.5%;border-radius: 50%;overflow: hidden;}
  .cutimg img{width:100%}
  .section-bottom{position:absolute;bottom:0;width:100%}
  .section-bottom img{position:absolute;bottom:0;width:100%;z-index:2}
  .show-div{position:relative;bottom:.2rem;left:1rem;display:inline-block;z-index:5}
  .back-div{position:relative;right:1rem;bottom:.2rem;float:right;display:block;z-index:5}
</style>
